<!--资产领用页-->
<template>
  <div style="height:6vh;padding:10px 20px;background-color:#fff;">
    <span style="line-height:60px;font-size:20px;">领用审批</span>
  </div>
  <!-- 领用申请弹窗 -->
  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      style="width: 1000px;padding: 40px;"
      :before-close="handleClose">

    <el-form label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="资产识别码">
            <el-input placeholder="请输入内容" v-model="applicationForm.assetCode" @change="loadAsset"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="领用数量">
            <el-input placeholder="请输入内容" v-model="applicationForm.num" @change="checkNum"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="品牌">
            <el-input placeholder="请输入内容" v-model="searchAsset.brand" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格">
            <el-input placeholder="请输入内容" v-model="searchAsset.specifications" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="资产状态" >
            <el-input placeholder="请输入内容" v-model="searchAsset.status" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库存数">
            <el-input placeholder="请输入内容" v-model="searchAsset.stockNum" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="原因">
            <el-input placeholder="请输入内容" v-model="applicationForm.reason"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="领用时间">
              <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                              v-model="applicationForm.useTime"/>
            </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input placeholder="请输入内容" v-model="applicationForm.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary"
                 @click="saveApplication">确定</el-button>
    </template>
  </el-dialog>

  <!-- 审批申请弹窗 -->
  <el-dialog
      :title="dialogTitle2"
      v-model="dialogVisible2"
      style="width: 1000px;padding: 40px;"
      :before-close="handleClose">

    <el-form label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="申请人Id">
            <el-input placeholder="请输入内容" v-model="applicationFormB.userId" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请日期">
            <el-input placeholder="请输入内容" v-model="applicationFormB.applicationTime" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="资产识别码">
            <el-input placeholder="请输入内容" v-model="applicationFormB.assetCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="领用数量">
            <el-input placeholder="请输入内容" v-model="applicationFormB.num" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="品牌">
            <el-input placeholder="请输入内容" v-model="searchAssetB.brand" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格">
            <el-input placeholder="请输入内容" v-model="searchAssetB.specifications" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="资产状态" >
            <el-input placeholder="请输入内容" v-model="searchAssetB.status" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库存数">
            <el-input placeholder="请输入内容" v-model="searchAssetB.stockNum" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="原因">
            <el-input placeholder="请输入内容" v-model="applicationFormB.reason" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="领用时间">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            v-model="applicationFormB.useTime" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input placeholder="请输入内容" v-model="applicationFormB.remark" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="驳回原因" v-if="applicationStatus==40">
            <el-input v-model="applicationFormB.rejectReason" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose" v-if="applicationStatus==10">取消</el-button>
      <el-button type="danger"
                 @click="rejectAudit" v-if="applicationStatus==10">驳回</el-button>
      <el-button type="success"
                 @click="confirmAudit" v-if="applicationStatus==10">通过</el-button>
    </template>
  </el-dialog>

  <!-- 驳回原因弹窗 -->
  <el-dialog title="驳回 查看" v-model="rejectDialogVisible" style="margin-top: 37vh;" :before-close="rejectConfirm">
    <el-descriptions direction="horizontal" border>
      <el-descriptions-item label="驳回原因">
        <el-input placeholder="请输入驳回原因" v-model="rejectReason"></el-input>
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button type="primary" plain @click="closeReject">取消</el-button>
      <el-button type="primary" @click="auditReject">确定</el-button>
    </template>
  </el-dialog>

  <!-- 审批单主体 -->
  <el-card style="margin:20px;">
    <!--  审批状态项  -->
    <el-radio-group style="margin-bottom: 15px;" v-model="applicationStatus" @change="loadAudit">
      <el-radio-button value="10" size="large">待我审核</el-radio-button>
      <el-radio-button value="20" size="large">待他人审核</el-radio-button>
      <el-radio-button value="30" size="large">已审核</el-radio-button>
      <el-radio-button value="40" size="large">驳回</el-radio-button>
    </el-radio-group>
    <!--  审批列表  -->
    <el-table :data="auditList">
      <el-table-column label="编号" prop="id" align="center" width="55" type="index"></el-table-column>
      <el-table-column label="员工编号" prop="userId" align="center" width="110"></el-table-column>
      <el-table-column label="资产识别码" prop="assetCode" align="center" width="110"></el-table-column>
      <el-table-column label="资产类型" prop="assetType" align="center"></el-table-column>
      <el-table-column label="品牌" prop="assetBrand" align="center"></el-table-column>
      <el-table-column label="领用数量" prop="num" align="center"></el-table-column>
      <el-table-column label="申请时间" prop="applicationTime" align="center"></el-table-column>
      <el-table-column label="操作" width="100" align="center" v-if="applicationStatus==10||applicationStatus==40" :key="audit">
        <template #default="scope">
          <!-- 审批10：在待我审核页签下显示，需要当前登录用户进行审批 -->
          <el-button type="primary" link v-if="applicationStatus==10" @click="auditing(scope.row.id)">审批</el-button>
          <!-- 查看40：在驳回页签下显示，可以查看已驳回申请的驳回原因 -->
          <el-button type="primary" link v-if="applicationStatus==40" @click="auditing(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 申请列表 -->
  <div style="height:6vh;padding:10px 20px;background-color:#fff;">
    <span style="line-height:60px;font-size:20px;">领用申请查询</span>
    <el-button type="primary" @click="saveDialogTitle"
               style="float:right;margin-top:10px;">领用申请</el-button>
  </div>

  <!--申请搜索卡片-->
  <el-card style="margin: 20px;height: 70px">
    <el-form :inline="true">
      <el-form-item label="资产识别码" style="width: 200px;">
        <el-input placeholder="请输入内容" v-model="searchApplication.assetCode"></el-input>
      </el-form-item>
      <el-form-item label="资产类型" style="width: 200px;">
        <el-input placeholder="请输入内容" v-model="searchApplication.assetType"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadApplication">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

    <!-- 领用申请列表 -->
  <el-card style="margin:20px;">
    <el-table :data="applicationList">
      <el-table-column label="编号" prop="id" align="center" width="55" type="index"></el-table-column>
      <el-table-column label="员工编号" prop="userId" align="center" width="110"></el-table-column>
      <el-table-column label="资产识别码" prop="assetCode" align="center" width="110"></el-table-column>
      <el-table-column label="资产类型" prop="assetType" align="center"></el-table-column>
      <el-table-column label="品牌" prop="assetBrand" align="center"></el-table-column>
      <el-table-column label="领用数量" prop="num" align="center"></el-table-column>
      <el-table-column label="申请时间" prop="applicationTime" align="center"></el-table-column>
      <el-table-column label="审批状态" prop="status" align="center" :formatter="statusFormatter"></el-table-column>
      <el-table-column label="领用时间" prop="useTime" align="center"></el-table-column>
      <el-table-column label="操作" align="center" >
        <template #default="scope">
      <!--    TODO v-if显示本人才可编辑删除      -->
          <el-button link type="primary" size="small" @click="editApplication(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteApplication(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
// import axios from "axios";
import axios from "@/http";
import {ElMessage} from "element-plus";
import index from "vuex";


const auditList = ref([]);
const applicationList = ref([]);
const applicationStatus = ref("10");
const dialogTitle = ref('领用申请');
const dialogTitle2 = ref('审批领用');
const dialogVisible2 = ref(false);
const dialogVisible = ref(false);
const searchAudit = ref({});
const applicationForm = ref({});
const searchApplication = ref({});
const applicationFormB = ref({});
const searchAsset = ref({});
const searchAssetB = ref({});
const rejectDialogVisible = ref(false);
const rejectReason = ref();

const userInfo = getUser();
const username = userInfo?userInfo.username:'用户';
var id = userInfo.id;
var departmentId = userInfo.departmentId;

const saveDialogTitle = () => {
  dialogVisible.value = true;
  dialogTitle.value = '领用申请';
}

const loadAudit = ()=> {
  // searchAudit.value.parentId = user.value.id;
  searchAudit.value.status = applicationStatus.value;
  let data = qs.stringify(searchAudit.value);
  axios.get(BASE_URL+'/oa/asset/requisition/select?'+data).then((response)=>{
    if(response.data.code == 20000){
      auditList.value = response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }
  })

}

const assetFormatter = ()=>{
  if(searchAsset.value.status == 1){
    searchAsset.value.status = '空闲';
  }
  if(searchAsset.value.status == 2){
    searchAsset.value.status = '占用';
  }
  if(searchAsset.value.status == 3){
    searchAsset.value.status = '待修';
  }
  if(searchAsset.value.status == 4){
    searchAsset.value.status = '修理中';
  }
  if(searchAsset.value.status == 5){
    searchAsset.value.status = '报废';
  }
}

const statusFormatter = (row,column,cellValue,index)=>{
  if(cellValue == 10){
    cellValue = '待审批';
  }else if(cellValue == 20){
    cellValue = '待审批';
  }else if(cellValue == 30){
    cellValue = '已通过';
  }else if(cellValue == 40){
    cellValue = '驳回';
  }
  return cellValue;
}

onMounted(()=>{
  loadAudit();
  loadApplication();
})


const handleClose = () => {
  if(confirm('确定要关闭本弹窗吗?')){
    dialogVisible.value = false;
    applicationForm.value = {};
    searchAsset.value = {};
    dialogVisible2.value = false;
    applicationFormB.value = {};
    searchAssetB.value = {};
  }
}

const loadAsset = () => {
  let code = applicationForm.value.assetCode;
  axios.get(BASE_URL+'/oa/asset/select?code='+code).then((response)=>{
    if(response.data.code == 20000 && response.data.data.length != 0){
      searchAsset.value = response.data.data[0];
      assetFormatter();
    }else {
      ElMessage.error("请确认资产识别码!");
    }
  })

}
const loadAssetB = () => {
  let code = applicationFormB.value.assetCode;
  axios.get(BASE_URL+'/oa/asset/select?code='+code).then((response)=>{
    if(response.data.code == 20000 && response.data.data.length != 0){
      searchAssetB.value = response.data.data[0];
      assetFormatter();
    }else {
      ElMessage.error("请确认资产识别码!");
    }
  })

}

const checkNum = () =>{
  if(applicationForm.value.num > searchAsset.value.stockNum){
    ElMessage.error("领用数超出库存数!");
    applicationForm.value.num = "";
  }
}

const saveApplication = () => {
  applicationForm.value.userId = id;
  applicationForm.value.departmentId = departmentId;
  applicationForm.value.parentId = 20006;
  applicationForm.value.assetId = searchAsset.value.id;
  applicationForm.value.assetType = searchAsset.value.type;
  applicationForm.value.assetBrand = searchAsset.value.brand;
  applicationForm.value.assetSpecifications = searchAsset.value.specifications;

  let saveData = qs.stringify(applicationForm.value);
  axios.post(BASE_URL+'/oa/asset/requisition/save',saveData).then((response)=>{
    if(response.data.code == 20000){
      dialogVisible.value = false;
      applicationForm.value = {};
      searchAsset.value = {};
      loadApplication();
      loadAudit();
      ElMessage.success("申请成功");
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

const loadApplication = () =>{
  let data = qs.stringify(searchApplication.value);
  axios.get(BASE_URL+'/oa/asset/requisition/select?'+data).then((response)=>{
    if(response.data.code == 20000){
      applicationList.value = response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }
  })

}

const resetSearch = () => {
  searchApplication.value = {};
  loadApplication();
}

const editApplication = (id) => {
  applicationForm.value = {};
  searchAsset.value = {};
  dialogVisible.value = true;
  dialogTitle.value = '编辑申请';
  axios.get(BASE_URL+'/oa/asset/requisition/select?id='+id).then((response)=>{
    if(response.data.code == 20000 && response.data.data.length != 0){
      applicationForm.value = response.data.data[0];
      searchAsset.value.type = applicationForm.value.assetType;
      searchAsset.value.brand = applicationForm.value.assetBrand;
      searchAsset.value.specifications = applicationForm.value.assetSpecifications;
      loadAsset();
      loadAudit();
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

const deleteApplication = (id) => {
  if (confirm('确定要删除本申请单吗?')) {
    axios.post('/oa/asset/requisition/delete/' + id).then((response) => {
      if (response.data.code == 20000) {
        loadApplication();
        loadAudit();
        ElMessage.success("删除成功");
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

const auditing = (id) => {
  dialogVisible2.value = true;
  if(applicationStatus.value == "10"){
    dialogTitle2.value = '待审批详情';
  }else {
    dialogTitle2.value = '驳回详情';
  }
  axios.get(BASE_URL+'/oa/asset/requisition/select?id='+id).then((response)=>{
    if(response.data.code == 20000 && response.data.data.length != 0){
      applicationFormB.value = response.data.data[0];
      searchAssetB.value.type = applicationFormB.value.assetType;
      searchAssetB.value.brand = applicationFormB.value.assetBrand;
      searchAssetB.value.specifications = applicationFormB.value.assetSpecifications;
      loadAssetB();
      console.log(applicationFormB.value);
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

const confirmAudit = () => {
  applicationFormB.value.status = 30;
  let data = qs.stringify(applicationFormB.value);
  axios.post(BASE_URL+'/oa/asset/requisition/update',data).then((response)=>{
    if(response.data.code == 20000){
      dialogVisible2.value = false;
      loadAudit();
      loadApplication();
      ElMessage.success("审批通过");
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

const rejectAudit = () => {
  rejectDialogVisible.value = true;
}

const closeReject = () => {
  rejectDialogVisible.value = false;
  rejectReason.value = "";
}

const auditReject = () => {
  applicationFormB.value.status = 40;
  applicationFormB.value.rejectReason = rejectReason.value;
  let data = qs.stringify(applicationFormB.value);
  axios.post(BASE_URL+'/oa/asset/requisition/update',data).then((response)=>{
    if(response.data.code == 20000){
      dialogVisible2.value = false;
      rejectDialogVisible.value = false;
      rejectReason.value = "";
      loadAudit();
      loadApplication();
      ElMessage.success("已驳回");
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}



</script>

<style scoped>

</style>